.q-tabs
  flex-direction column

.q-tabs-scroller
  overflow hidden
  color $tabs-color

.q-tab-pane
  padding $tabs-pane-padding
  border $tabs-pane-border

.q-tabs-no-pane-border .q-tab-pane
  border 0

.q-tabs-panes:empty
  display none

.q-tabs-normal
  .q-tabs-bar
    color white
  .q-tab-icon, .q-tab-label
    opacity $tabs-unselected-opacity

.q-tab
  cursor pointer
  transition color .3s, background .3s
  white-space nowrap
  user-select none
  padding $tabs-padding
  min-height $tabs-min-height
  text-transform $tabs-text-transform

  > .q-icon + .q-tab-label
    margin-top 7px
  .q-tab-label
    text-align center

  &.icon-and-label
    padding $tabs-padding-with-icon
    min-height $tabs-min-height-with-icon

  .q-tab-icon
    font-size $tabs-icon-font-size

  .q-chip
    top 5px
    right 0
    left initial
    color white
    background alpha($dot-color, .75)

  &.active
    .q-tab-icon, .q-tab-label
      opacity 1

@media (max-width $breakpoint-sm-max)
  .q-tab
    &.hide-icon .q-tab-icon,
    &.hide-label .q-tab-label
      display none !important

@media (max-width $breakpoint-md-max)
  .q-tabs-head:not(.scrollable)
    .q-tabs-scroller, .q-tab
      flex 1 1 auto

@media (min-width $breakpoint-lg-min)
  .q-tab, .q-tab.icon-and-label
    padding-left $tabs-big-screen-horiz-padding
    padding-right $tabs-big-screen-horiz-padding
  .q-tabs-head:not(.scrollable)
    padding-left $tabs-big-screen-side-padding
    padding-right $tabs-big-screen-side-padding

.q-tabs-head
  min-height $tabs-min-height
  overflow hidden
  background $tabs-background
  font-size $tabs-font-size
  font-weight $tabs-font-weight
  transition color .18s ease-in, box-shadow .18s ease-in
  position relative

  &:not(.scrollable)
    .q-tabs-left-scroll, .q-tabs-right-scroll
      display none !important

.q-tabs-left-scroll, .q-tabs-right-scroll
  position absolute
  height 100%
  cursor pointer
  color white
  .q-icon
    text-shadow 0 0 10px black
    font-size (1.2 * $tabs-icon-font-size)
    visibility hidden
  &:hover .q-icon
    visibility visible
  &.disabled
    display none

.q-tabs-left-scroll
  left 0
  background linear-gradient(to left, transparent, rgba(255, 255, 255, .5))
.q-tabs-right-scroll
  right 0
  background linear-gradient(to right, transparent, rgba(255, 255, 255, .5))

.q-tabs-align-justify
  .q-tabs-scroller, .q-tab
    flex 1 1 auto
.q-tabs-align-center
  justify-content center
.q-tabs-align-right
  justify-content flex-end

.q-tabs-bar
  border $tabs-border-width solid currentColor
  border-width 0
  position absolute
  height 0
  left 0
  right 0
.q-tabs-global-bar
  width 1px
  transform scale(0)
  transform-origin left center
  transition transform
  transition-duration .15s
  transition-timing-function cubic-bezier(.4, .0, 1, 1)
  &.contract
    transition-duration .18s
    transition-timing-function cubic-bezier(.0, .0, .2, 1)

.q-tabs-global-bar-container.highlight > .q-tabs-global-bar
  display none

.q-tabs-two-lines .q-tab
  white-space normal
  .q-tab-label
    overflow hidden
    display -webkit-box
    -webkit-box-orient vertical
    -webkit-line-clamp 2

.q-tabs-position-top
  .q-tabs-bar
    bottom 0
    border-bottom-width $tabs-border-width

.q-tabs-position-bottom
  .q-tabs-bar
    top 0
    border-top-width $tabs-border-width
  .q-tabs-panes
    order -1

.q-tabs-inverted
  .q-tabs-scroller
    color $tabs-background

  .q-tabs-left-scroll
    background linear-gradient(to left, transparent, rgba(0, 0, 0, .1))
  .q-tabs-right-scroll
    background linear-gradient(to right, transparent, rgba(0, 0, 0, .1))

  .q-tabs-head
    background transparent

  &.q-tabs-position-top
    .q-tabs-panes
      border-top $tabs-pane-border
    .q-tab-pane
      border-top 0

  &.q-tabs-position-bottom
    .q-tabs-panes
      border-bottom $tabs-pane-border
    .q-tab-pane
      border-bottom 0

body.mobile .q-tabs-scroller
  overflow-y hidden
  overflow-x auto
  will-change scroll-position
  -webkit-overflow-scrolling touch
